<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>组件选项</title>
    </head>
    <body>

        <!-- 根组件的挂载点 -->
        <div id="root"></div>

        <!-- 导入 vue.js 3.x 核心库 -->
        <script src="../scripts/vue@3.2.31.js"></script>

        <!-- 导入 counter 组件，它会导致在全局作用域中定义一个 counter 变量 -->
        <script src="counter.js"></script>

        <script>
            const options = {
                // 模板
                template: `<div>
                                <button-counter></button-counter>
                                <a @click="handle">点我卸载根组件</a>
                           </div>`,
                // 子组件
                components: {
                    'button-counter': counter
                },
                // 方法
                methods: {
                    handle(){
                        // 卸载应用实例(app)的根组件(root)
                        app.unmount();
                    }
                },
                // 生命周期钩子
                unmounted(){
                    console.log( 'unmounted' , this );
                }
            }
            const app = Vue.createApp( options );
            const root = app.mount('#root');
        </script>
        
    </body>
</html>